import React from 'react'
import clsx from 'clsx'
import styles from './styles.module.css'
import 'animate.css/animate.min.css'
import CustCard from '@site/src/components/home/CustCard'
import 'animate.css/animate.min.css'
import { AnimationOnScroll } from 'react-animation-on-scroll'
import Translate, { translate } from '@docusaurus/Translate'
export default function CenterFeature(): React.JSX.Element {
  return (
    <header className={styles.heroBanner}>
      <div className="container">
        <AnimationOnScroll animateIn="animate__fadeInDown ">
          <div className="row">
            <div className={clsx('col col--12', styles.center)}>
              <h1 className={clsx('hero__title', styles.title)}>
                <Translate
                  id="component.home.CenterFeature.title"
                  description="about the future of PolyOS">
                  Future
                </Translate>
              </h1>
              <p>
                <p className={clsx(styles.subtext)}>
                  <Translate
                    id="component.home.CenterFeature.subtitle"
                    description="about the PolyOS future">
                    We are committed to propelling PolyOS to become a
                    general operating system for RISC-V. Through
                    collaboration with the RISC-V Developer Kit
                    developed by the Institute of Software at the
                    Chinese Academy of Sciences, we aim to drive the
                    implementation of the LLVM Parallel Universe
                    Project that contributes to the prosperity of the
                    RISC-V software ecosystem. We also persistently
                    engage in the Open Source Software Promotion Plan
                    and are dedicated to constructing a thriving and
                    collaborative RISC-V hardware and software
                    ecosystem.
                  </Translate>
                </p>
              </p>
            </div>
          </div>
        </AnimationOnScroll>
        <div className="row">
          <div className={clsx('col col--12', styles.center)}>
            <CustCard
              title={translate({
                id: 'component.home.CenterFeature.card.polyos',
                description: 'about PolyOS',
                message: 'PolyOS',
              })}
              text={translate({
                id: 'component.home.CenterFeature.card.mainText',
                description: 'about the future of PolyOS',
                message:
                  'A general Mobile/AIoT operating system for RISC-V with modern SDK and toolchains',
              })}
            />
          </div>
        </div>
      </div>
    </header>
  )
}
